<template>
  <div class="relative">
    <el-card clas="!border-none  el-card-client" shadow="never">
      <template #header>
        <el-row :gutter="10" align="middle">
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-input
              class="input_style"
              v-model="queryParams.title"
              clearable
              placeholder="请输入关键字"
              @keyup.enter.native="getLists"
              size="small"
            />
          </el-col>
          <!-- <el-col :span="3">
            <el-date-picker
              v-model="queryParams.create_time"
              type="month"
              placeholder="请选择日期"
              class="input_time_style"
            />
          </el-col>-->
          <el-col :xs="12" :sm="10" :md="10" :lg="10" :xl="8">
            <el-button
              @click="getLists"
              color="#63ccba"
              type="primary"
              class="btn_style mr_10"
              size="small"
            >
              <template #icon>
                <icon name="el-icon-Search" />
              </template>
              搜索
            </el-button>
            <el-button
              @click="resetParams"
              type="primary"
              class="btn_style mr_10"
              size="small"
              >重置</el-button
            >
            <!-- <el-checkbox
              v-model="choseAllCheck"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              label="全选"
              border
              fill="#ff0000"
              class="mr_10"
            />-->
            <el-dropdown trigger="click" :hide-on-click="false">
              <el-button
                class="btn_style mr_10"
                type="primary"
                size="small"
                :disabled="AssignIndividuals != 1"
              >
                下拉操作1
                <template #icon>
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </template>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="choseMember"
                      v-if="AssignIndividuals"
                      >选择编辑员</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="openBelongingPersonVisible"
                      v-if="AssignIndividuals"
                      >选择归属人</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="clearClock"
                      >清除锁定</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="RandomVote"
                      >随机今日开始活动票数</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <el-col
            :xs="6"
            :sm="8"
            :md="8"
            :lg="8"
            :xl="14"
            class="flex justify-end"
          >
            <el-dropdown trigger="click" :hide-on-click="false">
              <!-- v-show="choseAllCheck || isIndeterminate" -->
              <el-button class="btn_style mr_10" type="primary" size="small">
                下拉操作2
                <template #icon>
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </template>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu class="input_style_300">
                  <el-dropdown-item class="mt_2" style="padding: 10px 10px">
                    <el-select
                      v-model="queryParams.industry"
                      placeholder="请选择模板"
                      class="input_style"
                      @change="getLists"
                      size="small"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in dictData.industry"
                        :key="index"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2" style="padding: 10px 10px">
                    <el-select
                      v-model="queryParams.status"
                      placeholder="活动状态"
                      class="input_style_300"
                      @change="getLists"
                      size="small"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in dictData.activity_status"
                        :key="index"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2" style="padding: 10px 10px">
                    <el-select
                      v-model="queryParams.is_show"
                      placeholder="任务状态"
                      class="input_style_300"
                      @change="getLists"
                      size="small"
                      clearable
                    >
                      <el-option
                        v-for="item in taskOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- <move-button class="ml_20 hidden-md-and-down"></move-button> -->
          </el-col>
        </el-row>
      </template>
      <div class="listsContainer pb_32" v-loading="pager.loading">
        <el-row :gutter="10" align="middle">
          <el-col
            :span="5"
            v-for="item in pager.lists"
            :key="item.id"
            class="each-col"
          >
            <el-card
              class="cardBD"
              shadow="hover"
              :class="{
                end: item.color == 2,
                lastDay: item.color == 4,
                threeDay: item.color == 3,
                now: item.color == 1,
              }"
            >
              <div class="btn_top mt_5 bg_white cursor_p pd_l_r">
                <div
                  clas="left pd_l_r"
                  style="display: flex; align-items: center"
                >
                  <el-checkbox
                    v-model="item.isCheck"
                    size="large"
                    class="mr_10 z-10"
                    @change="handleCheckedOnceChange(item)"
                  />
                </div>
                <div class="rigt">
                  <p class="yellow fz_14" @click="distributionMember(item)">
                    {{ item.admin_name || "请分配" }}
                  </p>
                </div>
              </div>
              <div class="bottom_container">
                <!-- @click="leavePlayer(item)" -->
                <div
                  class="title mt_5 bg_white cursor_p pd_l_r_5"
                  @click="leaveMange(item)"
                >
                  <div class="title_info">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.title"
                      placement="top"
                    >
                      <span class="font600 fz_14">{{ item.title }}</span>
                    </el-tooltip>
                  </div>
                </div>
                <div
                  class="data_content mt_5 bg_white cursor_p"
                  @click="leaveMange(item)"
                >
                  <el-row class="text_center fz_12">
                    <el-col :span="12">
                      <p>总票数</p>
                      <p class="blue fz_16">{{ item.vote_num }}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>热度</p>
                      <p class="yellow fz_16">{{ item.hot_num }}</p>
                    </el-col>
                  </el-row>
                  <el-row class="text_center fz_12 mt_5">
                    <el-col :span="12">
                      <p>申报</p>
                      <p class="redAlways fz_16">{{ item.view_num }}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>助力</p>
                      <p class="redAlways font600 fz_16">
                        {{ item.zhuli_num }}
                      </p>
                    </el-col>
                  </el-row>
                </div>
                <div class="member_info cursor_p flex flexbtween alignMiddle">
                  <div class="status fz_12">
                    状态：
                    <el-switch
                      class="z-2"
                      v-model="item.is_show"
                      :active-value="1"
                      :inactive-value="0"
                      @change="changeShow(item)"
                    />
                  </div>
                  <div class="remark fz_12 flex alignMiddle">
                    <p>
                      备注：
                      <span class="red font600">{{ item.remark }}</span>
                    </p>
                  </div>
                </div>
                <div class="time cursor_p" @click="leaveMange(item)">
                  <p
                    class="start_time bg_white mt_3 fz16"
                    style="font-size: 0.75rem; padding: 0.15rem 0.3rem"
                  >
                    开始时间：
                    {{ item.start_time }}
                  </p>
                  <p
                    class="end_time bg_white mt_5 fz16"
                    style="font-size: 0.75rem; padding: 0.15rem 0.3rem"
                  >
                    结束时间：
                    {{ item.end_time }}
                  </p>
                </div>
              </div>
              <div class="title_info_copy">
                <el-row class="mt_5" :gutter="5">
                  <el-col :span="8">
                    <el-button
                      class="input_style z-2"
                      type="primary"
                      size="small"
                      @click.stop="popularity(item.id)"
                      ><span class="fz16"> 活动配置</span></el-button
                    >
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style z-2"
                      type="danger"
                      size="small"
                      @click.stop="cpoyLink(item.link)"
                    >
                      <span class="fz16"> 访问限制</span>
                    </el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style z-2"
                      type="primary"
                      size="small"
                      @click="RandomVote(item.id)"
                      :disabled="AssignIndividuals != 1"
                    >
                      <span class="fz16"> 随机票数</span>
                    </el-button>
                  </el-col>
                </el-row>
                <el-row class="mt_5" :gutter="5">
                  <el-col :span="8">
                    <el-button
                      class="input_style btn_style tag-read z-2"
                      type="success"
                      size="small"
                      color="#63ccba"
                      :data-clipboard-text="item.link"
                      @click.stop="cpoyLink(item.link)"
                    >
                      <span class="fz16"> 复制链接</span>
                    </el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style z-2"
                      type="primary"
                      @click.stop="leaveHlep(item)"
                      size="small"
                    >
                      <span class="fz16"> 助力日志</span>
                    </el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style z-2"
                      type="primary"
                      @click.stop="leaveOperationLog(item)"
                      size="small"
                      :disabled="AssignIndividuals != 1"
                    >
                      <span class="fz16"> 操作日志</span>
                    </el-button>
                  </el-col>
                </el-row>
              </div>
              <div
                class="warning"
                v-if="item.lock_status == 1"
                @click="leaveMange(item)"
              >
                <el-icon class="icon_unlock"><Unlock /></el-icon>
              </div>
              <div class="lock" v-else-if="item.lock_status == 2">
                <el-icon class="icon_locking"> <Lock /></el-icon>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div>
      <el-pagination
        :currentPage="pager.page"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="position"
      />
    </div>
    <!-- 选择会员 -->
    <el-dialog
      v-model="BelongingPersonVisible"
      title="编辑员"
      width="800"
      @close="BelongingPersonVisible = false"
    >
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-input
              placeholder="请输入关键字"
              v-model="menberSearch"
              clearable
              class="input_style_160 mr_10"
            ></el-input>
            <el-button
              @click="serchMemberList"
              color="#63ccba"
              type="primary"
              class="btn_style mr_10"
            >
              <template #icon>
                <icon name="el-icon-Search" />
              </template>
              搜索
            </el-button>
            <el-button @click="serchMemberAll" plain class="mr_10"
              >查询全部</el-button
            >
          </div>
        </template>
        <el-table
          :data="BelongingPersonTableChose"
          border
          stripe
          v-loading="tableloading"
          height="480"
        >
          <el-table-column property="id" label="id" align="center" />
          <el-table-column property="account" label="昵称" align="center" />
          <el-table-column property="nickname" label="用户" align="center" />
          <el-table-column property="address" label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="primary"
                @click="getMenberLsit(row)"
                icon="Position"
                >查询</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mt_10"
          v-model:currentPage="BelongingPersonCurrentPage"
          v-model:page-size="BelongingPersonPageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-model:total="BelongingPersonTotal"
          @size-change="BelongingPersonHandleSizeChange"
          @current-change="BelongingPersonHandleCurrentChange"
        />
      </el-card>
    </el-dialog>
    <!-- 选择归属人 -->
    <el-dialog
      v-model="BelongingPersonVisibleMore"
      title="分配归属人"
      width="800"
      @close="BelongingPersonVisibleMore = false"
    >
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-input
              placeholder="请输入关键字"
              v-model="BelongingPerson"
              clearable
              class="input_style_160 mr_10"
              size="small"
            ></el-input>
            <el-button
              @click="getPersonMoreTable"
              color="#63ccba"
              type="primary"
              class="btn_style mr_10"
              size="small"
            >
              <template #icon>
                <icon name="el-icon-Search" />
              </template>
              搜索
            </el-button>
            <el-button
              type="primary"
              class="btn_style mr_10"
              size="small"
              v-show="isdistribution && multipleSelection.length"
              @click="distributionBtn"
              >确认分配</el-button
            >
          </div>
        </template>
        <el-table
          :data="BelongingPersonMoreTableChose"
          border
          stripe
          v-loading="tableloading"
          height="480"
          class="mt_10"
          @selection-change="BelongingPersonMoreTableChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column property="id" label="id" align="center" />
          <el-table-column property="account" label="昵称" align="center" />
          <el-table-column property="role_name" label="角色" align="center" />
          <el-table-column property="mobile" label="电话" align="center" />
          <el-table-column property="remark" label="备注" align="center" />
          <el-table-column
            property="address"
            label="操作"
            align="center"
            v-if="!isdistribution"
          >
            <template #default="{ row }">
              <el-button type="primary" @click="getPersonLists(row)"
                >查询</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mt_10"
          v-model:currentPage="BelongingPersonMoreCurrentPage"
          v-model:page-size="BelongingPersonMorePageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-model:total="BelongingPersonMoreTotal"
          @size-change="BelongingPersonMoreHandleSizeChange"
          @current-change="BelongingPersonMoreHandleCurrentChange"
        />
      </el-card>
    </el-dialog>
    <!-- 访问限制  暂无权限 -->
    <!-- <el-dialog
          v-model="advancedSettingVisible"
          title="清除锁定"
          width="400"
          @close="advancedSettingVisible = false"
        >
          <el-form :model="advancedSettingForm" label-width="120px">
            <el-form-item label="报名">
              <el-switch v-model="advancedSettingForm.is_join" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="高级">
              <el-switch v-model="advancedSettingForm.is_gaoji" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="快速通道">
              <el-switch v-model="advancedSettingForm.is_kstd" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="关闭限流">
              <el-switch v-model="advancedSettingForm.is_gbxl" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="禁用老链接">
              <el-switch v-model="advancedSettingForm.is_jyllj" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="分配用户">
              <el-switch v-model="advancedSettingForm.is_fpyh" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="开启助力">
              <el-switch v-model="advancedSettingForm.is_kqzl" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="助力数量">
              <el-switch v-model="advancedSettingForm.is_zlsl" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="助力日志">
              <el-switch v-model="advancedSettingForm.is_zlrz" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="助力日志条数">
              <el-input-number v-model="advancedSettingForm.zlrz_num" controls-position="right" />
            </el-form-item>
            <el-form-item label="开启助力">
              <el-switch v-model="advancedSettingForm.is_open" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="人气比例">
              <el-input
                v-model="advancedSettingForm.popularity_ratio"
                placeholder="请输入人气比例"
                type="number"
                clearable
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="advancedSettingVisible = false" class="mr_10">取 消</el-button>
              <el-button type="primary" @click="advancedSettingSubmit">确 定</el-button>
            </div>
          </template>
    </el-dialog>-->
    <!-- 人气配置 -->
    <el-dialog
      v-model="PopularityConfigurationVisible"
      title="人气配置"
      width="600"
      @close="PopularityConfigurationVisible = false"
    >
      <el-scrollbar height="65vh">
        <el-form
          ref="ruleFormRef"
          :model="PopularityConfigurationForm"
          label-width="auto"
        >
          <el-divider content-position="left">
            <span class="fz_20 blue">前10名</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围">
            <el-col :span="11">
              <el-form-item prop="min_num1">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.min_num1"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">~</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="max_num1">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.max_num1"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="任务执行间隔秒" prop="time1">
            <el-select
              v-model="PopularityConfigurationForm.time1"
              class="input_style"
            >
              <el-option label="120" value="120" />
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-divider content-position="left">
            <span class="fz_20 blue">11名-20名</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围">
            <el-col :span="11">
              <el-form-item prop="min_num2">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.min_num2"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">~</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="max_num2">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.max_num2"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="任务执行间隔秒" prop="time2">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.time2"
            >
              <el-option label="120" value="120" />
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-divider content-position="left">
            <span class="fz_20 blue">21名-30名</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围">
            <el-col :span="11">
              <el-form-item prop="min_num3">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.min_num3"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">~</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="max_num3">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.max_num3"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="任务执行间隔秒" prop="time3">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.time3"
            >
              <el-option label="120" value="120" />
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-divider content-position="left">
            <span class="fz_20 blue">30名以后</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围" prop="min_num4">
            <el-col :span="11">
              <el-form-item prop="min_num1">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.min_num4"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">~</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="max_num4">
                <el-input
                  class="input_style_150"
                  v-model="PopularityConfigurationForm.max_num4"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="任务执行间隔秒" prop="time4">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.time4"
            >
              <el-option label="120" value="120" />
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动分组" prop="group_id">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.group_id"
            >
              <el-option label="默认分组" value="1" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="启动日志" prop="is_log">
            <el-switch
              v-model="PopularityConfigurationForm.is_log"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>-->
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteSubmitCancel(ruleFormRef)" class="mr_10"
            >取 消</el-button
          >
          <el-button type="primary" @click="deleteSubmit(ruleFormRef)"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 随机票数 -->
    <el-dialog
      v-model="RandomVoteVisible"
      title="随机票数"
      width="450"
      @close="RandomVoteVisible = false"
    >
      <el-form ref="randomRef" :model="RandomVoteFrom" label-width="120px">
        <el-form-item label="最小票数" prop="min">
          <el-input-number
            v-model="RandomVoteFrom.min"
            class="input_style_160"
            clearable
          />
        </el-form-item>
        <el-form-item label="最大票数" prop="max">
          <el-input-number
            v-model="RandomVoteFrom.max"
            class="input_style_160"
            placeholder="请输入复制活动标题"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="submitRandomCannel(randomRef)" class="mr_10"
            >取 消</el-button
          >
          <el-button type="primary" @click="submitRandom(randomRef)"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <QR-code-url
      :QrCodeVisible="QrCodeVisible"
      :QrCodeUrl="QrCodeUrl"
      @close="QrCodeVisible = false"
    ></QR-code-url>
  </div>
</template>

<script lang="ts" setup name="zgActivityLists">
import {
  ref,
  reactive,
  nextTick,
  defineOptions,
  onActivated,
  onDeactivated,
} from "vue";
import { usePagingData } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
  apiZgDataConfigure,
  apiZgDataLists,
  apiZgDataRandom,
  apiZgDataStatus,
  clear_lock,
} from "@/api/zg_data";
import { ViewAdvancedSettingsALL } from "@/api/zg_activity";
import { apiMemberList } from "@/api/member";
import { adminList } from "@/api/perms/admin";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import { ElMessage } from "element-plus";
import { getRoutePath } from "@/router";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import useClipboard from "vue-clipboard3";
import QRCodeUrl from "@/components/QRCodeUrl/index.vue";
const route = useRoute();
const router = useRouter();
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();
import useAppStore from "@/stores/modules/app";
const appStore = useAppStore();
const AssignIndividuals = userStore.userInfo.root; //通过pinia查询是否是超级管理员 是显示选择归属人
import "element-plus/theme-chalk/display.css";
// 任务状态下拉框
defineOptions({
  name: "zg_data",
});
const taskOptions = reactive([
  { label: "关闭", value: "0" },
  { label: "开启", value: "1" },
]);
//  修改状态
const changeShow = async (val: any) => {
  try {
    await apiZgDataStatus({
      id: val.id,
      is_show: val.is_show,
    });
    getLists();
  } catch (error: any) {
    getLists();
  }
};

// import AllocatioPopup from "./allocationEdit.vue" //设置归属人
// import moveButton from "@/components/moveButton/index.vue"
//路由跳转
const leavePlayer = (item: any) => {
  router.push({
    path: getRoutePath("activity.zg_player_list/lists"),
    query: {
      id: item.id,
      title: item.title,
    },
  });
};
const leaveMange = (val: any) => {
  router.push({
    path: getRoutePath("activity.zg_player_manage/lists"),
    query: {
      topTitle: val.title,
      activity_id: val.id,
    },
  });
};
const leaveHlep = (val: any) => {
  router.push({
    path: getRoutePath("activity.zg_gift_log/lists"),
    query: {
      activity_id: val.id,
      topTitle: val.title,
    },
  });
};
const leaveOperationLog = (val: any) => {
  router.push({
    path: getRoutePath("activity.zg_activity_operate_log/lists"),
    query: {
      activity_id: val.id,
    },
  });
};
const AllocatioDia = ref(false);
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

// 查询条件
const queryParams = reactive({
  title: "",
  status: "3",
  industry: "",
  create_time: "",
  is_show: "1",
  user_id: "",
  admin_id: "",
});

// 全选
const choseAllCheck = ref(false);
const isIndeterminate = ref(false);
const chenkChangeLists = ref<any>([]); //选择要操作的ID
const handleCheckAllChange = () => {
  if (choseAllCheck.value) {
    pager.lists.forEach((item: any) => {
      item.isCheck = true;
      chenkChangeLists.value.push(item.id);
    });
  } else {
    pager.lists.forEach((item: any) => {
      item.isCheck = false;
    });
    chenkChangeLists.value = reactive([]);
  }
  isIndeterminate.value = false;
};
//  选择单个
const handleCheckedOnceChange = (val: any) => {
  if (val.isCheck) {
    chenkChangeLists.value.push(val.id);
  } else {
    chenkChangeLists.value = chenkChangeLists.value.filter(
      (item: number | string) => {
        return item !== val.id;
      }
    );
  }
  const checkedCount = chenkChangeLists.value.length;
  choseAllCheck.value = checkedCount === pager.lists.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < pager.lists.length;
};

// 选择内容初始为空状态
const choseStart = () => {
  choseAllCheck.value = false;
  isIndeterminate.value = false;
  chenkChangeLists.value = [];
};

// 清除锁定
const clearClock = async () => {
  await clear_lock({ id: chenkChangeLists.value });
  getLists();
};

// 获取字典数据
const { dictData } = useDictData("activity_status,industry");

//选择归属人
// 1.点击打开弹框  查全部数据    2.筛选查表格名字  3.根据列表ID查找数据
const BelongingPersonVisibleMore = ref(false);
const BelongingPerson = ref("");
const BelongingPersonMoreTableChose = ref<any>([]);
const BelongingPersonMoreCurrentPage = ref(1);
const BelongingPersonMorePageSize = ref(10);
const BelongingPersonMoreTotal = ref();
const tableloading = ref(false);
const multipleSelection = ref<[]>([]);
const getPersonMoreTable = async () => {
  tableloading.value = true;
  const res = await adminList({
    account: BelongingPerson.value,
    name: "",
    role_id: "",
    page_no: BelongingPersonCurrentPage.value,
    page_size: BelongingPersonPageSize.value,
  });
  BelongingPersonMoreTableChose.value = res.lists;
  BelongingPersonMoreTotal.value = res.count;
  await nextTick();
  tableloading.value = false;
};
const openBelongingPersonVisible = async () => {
  BelongingPersonVisibleMore.value = true;
  await getPersonMoreTable();
  isdistribution.value = "";
};
const BelongingPersonMoreHandleSizeChange = async (val: number) => {
  BelongingPersonPageSize.value = val;
  await getPersonMoreTable();
};
const BelongingPersonMoreHandleCurrentChange = async (val: number) => {
  BelongingPersonCurrentPage.value = val;
  await nextTick();
  await getPersonMoreTable();
};
const getPersonLists = async (val: any) => {
  BelongingPersonVisibleMore.value = false;
  queryParams.admin_id = val.id;
  await getLists();
};
const serchPersonMoreList = async () => {
  await getPersonMoreTable();
};
const BelongingPersonMoreTableChange = async (val: []) => {
  multipleSelection.value = val;
};
const isdistribution = ref(""); //需要分配人员的活动id
// 分配人员
const distributionMember = async (item: Object) => {
  BelongingPersonVisibleMore.value = true;
  await getPersonMoreTable();
  isdistribution.value = item.id;
};
const distributionBtn = async () => {
  const admin = multipleSelection.value.map((value: any) => {
    return value.id;
  });
  const admin_id = admin.join(",");
  const form = {
    admin_id,
    id: isdistribution.value,
  };
  const res = await ViewAdvancedSettingsALL(form);
  BelongingPersonVisibleMore.value = false;
  getLists();
};

//   选择会员
// 弹框表格分页
const BelongingPersonTableChose = ref<any>([]);
const BelongingPersonCurrentPage = ref(1);
const BelongingPersonPageSize = ref(10);
const BelongingPersonTotal = ref();
const BelongingPersonVisible = ref(false);
const menberSearch = ref("");
const getBelongingTable = async () => {
  tableloading.value = true;
  const res = await apiMemberList({
    keywords: menberSearch.value,
    comefrom: "",
    type: "",
    source: "",
    page_no: BelongingPersonCurrentPage.value,
    page_size: BelongingPersonPageSize.value,
  });
  BelongingPersonTableChose.value = res.lists;
  BelongingPersonTotal.value = res.count;
  await nextTick();
  tableloading.value = false;
};
const BelongingPersonHandleSizeChange = async (val: number) => {
  BelongingPersonPageSize.value = val;
  await getBelongingTable();
};
const BelongingPersonHandleCurrentChange = async (val: number) => {
  BelongingPersonCurrentPage.value = val;
  await getBelongingTable();
};
const choseMember = async () => {
  BelongingPersonVisible.value = true;
  getBelongingTable();
};
const getMenberLsit = async (val: Object) => {
  BelongingPersonVisible.value = false;
  queryParams.user_id = val.id;
  await getLists();
};
const serchMemberList = async () => {
  BelongingPersonCurrentPage.value = 1;
  BelongingPersonPageSize.value = 10;
  await getBelongingTable();
};
const serchMemberAll = async () => {
  await resetParams();
  await getLists();
  BelongingPersonVisible.value = false;
};

//  复制链接 // 二维码
const QrCodeVisible = ref(false);
const QrCodeUrl = ref("");
const { toClipboard } = useClipboard();
const cpoyLink = async (link: String) => {
  QrCodeVisible.value = true;
  QrCodeUrl.value = link;

  return;
  try {
    await toClipboard(link); //实现复制
    ElMessage.success("复制成功");
  } catch (e) {
    console.error(e);
  }
  return { cpoyLink };
};

//  随机票数
const RandomVoteVisible = ref(false);
const randomRef = ref();
const RandomVoteFrom = reactive({
  id: "",
  min: "",
  max: "",
  is_today: "",
});
const RandomVote = async (id: string | number) => {
  if (typeof id == "number") {
    RandomVoteFrom.id = id;
    delete RandomVoteFrom.is_today;
  } else {
    delete RandomVoteFrom.id;
    RandomVoteFrom.is_today = "1";
  }
  RandomVoteVisible.value = true;
};
const submitRandom = async (formEl: FormInstance | undefined) => {
  await apiZgDataRandom(RandomVoteFrom);
  await getLists();
  RandomVoteVisible.value = false;
  formEl.resetFields();
};
const submitRandomCannel = async (formEl: FormInstance | undefined) => {
  formEl.resetFields();
  RandomVoteVisible.value = false;
};

//  人气配置
const PopularityConfigurationVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const PopularityConfigurationForm = reactive({
  id: "",
  min_num1: "",
  max_num1: "",
  time1: "",
  min_num2: "",
  max_num2: "",
  time2: "",
  min_num3: "",
  max_num3: "",
  time3: "",
  min_num4: "",
  max_num4: "",
  time4: "",
  group_id: "",
  is_log: "",
});
const popularity = async (id: string) => {
  PopularityConfigurationVisible.value = true;
  PopularityConfigurationForm.id = id;
};
const deleteSubmit = async (formEl: FormInstance | undefined) => {
  await apiZgDataConfigure(PopularityConfigurationForm);
  await getLists();
  //   formEl.resetFields();
  PopularityConfigurationVisible.value = false;
};
const deleteSubmitCancel = async (formEl: FormInstance | undefined) => {
  //   formEl.resetFields();
  PopularityConfigurationVisible.value = false;
};

// 分页相关
const { pager, getLists, resetParams } = usePagingData({
  fetchFun: apiZgDataLists,
  params: queryParams,
  page: appStore.dataPage,
});
const handleSizeChange = (val: number) => {
  pager.size = val;
  getLists();
};
const handleCurrentChange = (val: number) => {
  appStore.setDataPage(val);
  pager.page = val;
  getLists();
};

getLists();
</script>
<style lang="scss" scoped>
@media screen and (max-width: 900px) {
  .fz16 {
    font-size: 0.8rem;
    // color: red !important;
  }
}
@media screen and (max-width: 1400px) {
  .fz16 {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 1600px) {
  .fz16 {
    font-size: 0.8rem;
  }
}
.relative {
  position: relative !important;
}
.el-dropdown-menu {
  width: 200px;
}
.position {
  position: absolute;
  bottom: 0;
  left: 0.5%;
  right: 0;
  overflow: hidden;
  width: 99%;
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
}
.el-card-client {
  //   height: calc(100vh - 6rem) !important;
  //   height: 100vh !important;
  padding-bottom: 3.75rem;
}

.btn_style {
  color: #fff;
}

.mr_10 {
  margin-right: 10px;
}

.input_w_100 {
  width: 6.25rem;
}

.flex {
  display: flex !important;
}
::v-deep .el-card__body {
  padding: 0 0.625rem;
}
.listsContainer {
  height: calc(100vh - 11.4rem);
  //   padding-bottom: 3.75rem;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.7rem;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .each-col {
    margin-top: 0.65rem;
    border-radius: 0.02976rem;
    height: 100%;
    // padding: 0.05952rem;

    .cardBD {
      //   background-color: rgb(245, 249, 255);
      min-height: 22rem;
      position: relative;
      ::v-deep .el-card__body {
        padding: 0.5rem;
      }
      .btn_top {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;

        .left {
          align-self: center;
        }

        .right {
          align-self: center;

          .blodWorld {
            font-size: 1.25rem;
            font-weight: bold;
          }
        }
      }

      .title {
        display: flex;

        .title_info {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 1.5rem;
        }

        .title_info_copy {
          font-size: 1.25rem;
        }
      }

      .member_info {
      }
      .warning {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        // align-items: center;
        font-size: 3rem;
        color: #e6a23c;
        padding-top: 7rem;
      }
      .lock {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        // align-items: center;
        font-size: 3rem;
        color: #f56c6c;
        z-index: 5;
        padding-top: 7rem;
      }
      .z-10 {
        z-index: 10;
      }
      .z-2 {
        position: relative;
        z-index: 2;
      }
    }
  }
}

.w_150 {
  width: 10rem;
}

.mt_10 {
  margin-top: 0.65rem;
}

.bg_white {
  background-color: #fff;
}

.cursor_p {
  cursor: pointer;
}

.p_5 {
  padding: 0.3125rem;
}

.red {
  color: #ff0000;
}
.redAlways {
  color: #ff0000;
}
.font_600 {
  font-weight: 600;
}

.fz_16 {
  font-size: 1rem;
}

.fz_12 {
  font-size: 0.75rem;
}

.flex {
  display: flex !important;
}

.lex_btween {
  justify-content: space-between;
}

.blue {
  color: #409eff;
}

.text_center {
  text-align: center;
}
.pt_10 {
  padding-top: 0.625rem;
}
.pb_10 {
  padding-bottom: 0.625rem;
}
.el-form-item__content {
  justify-content: space-between;
}
::v-deep .el-card__body {
  //   padding: 10px !important;
}
::v-deep .el-col-5 {
  width: 20%;
  max-width: 20%;
  flex: 0 0 20%;
}
.pb_32 {
  padding-bottom: 4rem;
}
.alignMiddle {
  align-items: center;
  align-content: center;
}
::v-deep .el-popper {
  width: 200px !important;
}
::v-deep.el-dropdown-menu__item {
  padding: 20px 0 !important;
}
// 已经结束
.end {
  background-color: rgba(170, 166, 166, 0.356);
}
// 最后一天
.lastDay {
  background-color: rgb(220, 20, 60);
  .red {
    color: #fff !important;
  }
}
// 还有三天
.threeDay {
  background-color: rgb(248, 201, 129);
}
.now {
  background-color: rgb(245, 249, 255);
}
.el-card {
  border: none;
}
</style>
<style lang="scss" scoped>
.el-dropdown-menu__item {
  padding: 20px 10px !important;
}
</style>
